import React, { Component } from 'react'
import ReactDom from 'react-dom'

export default class Demo extends Component {
    state = { count: 0 };

    add = () => {
        this.setState({count:this.state.count+1})
    }

    death = () => {
        // 卸载组件
        ReactDom.unmountComponentAtNode(document.getElementById('root'))
    }

    force = () => {
        //强制更新组件
        this.forceUpdate()
    }

    // 组件将要挂载的钩子
    componentWillMount() {
        console.log('组件将要挂载的钩子---componentWillMount');
    }
    
    //组件挂载完毕
    componentDidMount() {
        console.log('组件挂载完毕---componentDidMount');
    }
    
    // 组件将要卸载的钩子
    componentWillUnmount() {
        console.log('组件将要卸载的钩子---componentWillUnmount');
    }
    
    // 控制组件更新的“阀门”
    shouldComponentUpdate(nextProps, nextState) {
        console.log('控制组件更新的“阀门”---shouldComponentUpdate');

        return true
    }
    
    //组件将要更新
    componentWillUpdate() {
        console.log('组件将要更新---componentWillUpdate');
    }
    
    //组件更新完毕的钩子
    componentDidUpdate(prevProps, prevState) {
        console.log('组件更新完毕的钩子 --- componentDidUpdate');
    }
    
    


    render() {
        console.log('render');
        return (
            <div>
                <h2>当前求和为:{ this.state.count}</h2>
                <button onClick={this.add}>点我+1</button>
                <button onClick={this.death}>卸载组件</button>
                <button onClick={this.force}>强制更新</button>
                <A count={ this.state.count }/>
            </div>
        )
    }
}

class A extends Component {
    // 组件将要接收到新的props钩子
    UNSAFE_componentWillReceiveProps(props) {
        console.log('组件将要接收到新的props钩子 -- componentWillReceiveProps',props);
    }
    render() {
        return (
            <div>
                我是A组件，接收的和为：{this.props.count}
            </div>
        )
    }
}

